<template>
  <div>
    <div v-if="is" >
      <van-nav-bar
        title="关注的作者"
        left-arrow
        @click-left="$router.back()"
        fixed
      />
      <van-cell-group v-for="item in useruserFollowingList" :key="item.id">
        <van-cell :value="'粉丝' + item.fans_count">
          <template #title>
            <img :src="item.photo" class="custom-title test" />
            <van-tag type="danger">测试号</van-tag>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <div v-if="isShow" >
      <van-nav-bar
        title="关注的作者"
        left-arrow
        @click-left="$router.back()"
        fixed
      />
      <div class="test1">您还没有关注任何作者哦~</div>
    </div>
  </div>
</template>

<script>
import { userFollowings } from "../../api/index.js";
export default {
  name: "Followings",
  data() {
    return {
      useruserFollowingList: [],
      isShow:false,
      is:false
    };
  },
  activated() {
    this.getuuserFollowingsApi();
  },
  deactivated() {
    this.is = false
    this.isShow = false
  },
  methods: {
    async getuuserFollowingsApi() {
      let { data: res } = await userFollowings();
      this.useruserFollowingList = res.data.results;
      console.log(res);
      if (res.data.results.length == 0) {
        this.isShow = true
      } else { 
         this.is = true
      }
    },
  },
};
</script>

<style scoped lang="less">
.van-cell__title .van-tag[data-v-53700665]{
	justify-content: center;
}
.test {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.test1 {
  margin-top: 50px;
}
.van-cell__title {
  display: flex;
  flex-direction: column;
  .van-tag {
    width: 30%;
    margin-top: 10px;
  }
}
.van-cell__value {
  line-height: 75px;
}
/deep/.van-cell-group {
  padding-top: 50px;
}
</style>
